@charset "utf-8";
 
.triangle_border{
    display: inline-block;
    vertical-align: -webkit-baseline-middle;
}    
/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 10px 6px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:13px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 0px 0px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  黄*/
    position:absolute;
    top:1px;
    left:-7px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:10px 6px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:13px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:0px 0px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:-8px;
    left:-7px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:10px 6px 10px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:13px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:7px 7px 7px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:-7px;
    left:1px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:10px 0 10px 6px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:13px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:7px 0 7px 7px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 黄*/
    position:absolute;
    top:-7px;
    left:-8px;
}